<!-- 指标筛选 -->
<template>
  <div class="filter_target_charts">
    <dt-modal-edit
      ref="edit"
      :title="title"
      :label-width="130"
      okText="确定"
      cancelText="取消"
      :width="30"
      @ok="onOk"
      class="dt_modal_edit"
      @cancelData="onCancel">
      <Row class="label_warp">
        <Col span="24" class="tips">
          <Icon type="md-alert" class="tips_icon" />
          您至多可选择5个指标在图表中显示
        </Col>
      </Row>
      <CheckboxGroup v-model="checkVals" @on-change="handleChange" class="checkbox_group">
        <Checkbox
          :label="item.name"
          :class="['item', disabledFun(item) ? 'selected' : '']"
          v-for="(item, index) in list"
          :key="item.name + index"
          :disabled="disabledFun(item)">
          <span style="margin-left: 10px">{{ item.name }}</span>
          <span
            v-if="checkStatus == 1"
            :class="['tag', item.configType == 1 ? 'blue' : item.configType == 2 ? 'green' : '']">
            {{ item.configType == 1 ? '联' : item.configType == 2 ? '竟' : '' }}
          </span>
        </Checkbox>
      </CheckboxGroup>
    </dt-modal-edit>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '指标筛选',
        list: [],
        checkStatus: '',
        checkVals: [],
        oldCheckVals: [],
        templateAllList: []
      }
    },
    methods: {
      show(data) {
        this.checkStatus = data.type
        this.oldCheckVals = this.$dt.tool.deepClone(this.checkVals)
        this.$refs.edit.show()
        console.log(this.oldCheckVals, 'checkVals')
      },
      onCancel() {
        console.log(11111122222333)
        this.checkVals = this.oldCheckVals
        console.log(this.checkVals, this.oldCheckVals, 'quxiao ')
      },
      hide() {
        this.$refs.edit.hide()
      },
      handleChange() {
        console.log(this.list)
        console.log(this.oldCheckVals, 'checkVals')
      },
      disabledFun(item) {
        let dataList = this.checkVals
        return (
          (dataList.length == 1 && dataList.indexOf(item.name) != -1) ||
          (dataList.length == 5 && dataList.indexOf(item.name) == -1)
        )
      },
      //获取指标筛选 list
      getfilterListforTempalte(data) {
        console.log(data, '获取指标筛选list')
        this.list = []
        if (data.chartsType == 2 || data.chartsType == 4) {
          this.checkVals = []
        }
        //客户统计
        if (data.chartsType == 2) {
          if (data.TabVal == 1) {
            //客户统计（线索）
            let list = data.templateAllList[0].childModelConfig.slice(0, 3).filter((item) => {
              item.name = item.dailyConfigShortName
              if (item.dailyConfigShortName == '顾问录入') {
                item.name = '手动录入'
              }
              return item.hasLock
            })
            if (data.chartsStatus == 'optionPie' && list.length > 1) {
              list = list.slice(1, 3)
            }
            this.list = list
            // 判断 图表是饼图 并且客户统计不只有总来人或者总线索得情况
            this.list.map((item) => {
              if (data.chartsStatus == 'optionPie') {
                if (this.list.length == 1 && item.name == '总线索') {
                  this.checkVals.push(item.name)
                } else {
                  this.checkVals.push(item.name)
                }
              } else {
                this.checkVals.push(item.name)
              }
            })
          }
          if (data.TabVal == 2) {
            //客户统计（来人）
            data.templateAllList[1].childModelConfig = data.templateAllList[1].childModelConfig.filter(
              (x) => {
                return x.dailyConfigShortName != '线索转到访'
              }
            )
            let list = data.templateAllList[1].childModelConfig.slice(0, 3).filter((item) => {
              item.name = item.dailyConfigShortName
              return item.hasLock
            })
            if (data.chartsStatus == 'optionPie' && list.length > 1) {
              list = list.slice(1, 3)
            }
            this.list = list
            // 判断 图表是饼图 并且客户统计不只有总来人或者总线索得情况
            this.list.map((item) => {
              if (data.chartsStatus == 'optionPie') {
                if (this.list.length == 1 && item.name == '总来人') {
                  this.checkVals.push(item.name)
                } else {
                  this.checkVals.push(item.name)
                }
              } else {
                this.checkVals.push(item.name)
              }
            })
          }
        }
        //销售统计
        if (data.chartsType == 4) {
          let subscribelist = [{ name: '认购' }, { name: '实际净认购' }, { name: '足未签' }]
          let contractList = [{ name: '签约' }, { name: '净签约' }, { name: '已全款' }]
          data.templateAllList[3].childModelConfig.forEach((item) => {
            if (data.TabVal == 1) {
              //认购
              subscribelist.forEach((itemC) => {
                if (item.dailyConfigShortName == itemC.name && item.hasLock) {
                  this.list.push(itemC)
                }
              })
            }
            if (data.TabVal == 2) {
              //签约
              contractList.forEach((itemC) => {
                if (item.dailyConfigShortName == itemC.name && item.hasLock) {
                  this.list.push(itemC)
                }
              })
            }
            item.name = item.dailyConfigShortName
          })
          this.list.map((item) => {
            this.checkVals.push(item.name)
          })
        }
        //pk数据\渠道统计
        if (data.chartsType == 1 || data.chartsType == 3) {
          this.list = data.filterList || []
          this.checkVals = this.list.slice(0, 5).map((item) => {
            return item.name
          })
        }
      },
      onOk() {
        this.$emit('success', { filterData: this.checkVals })
        this.$refs.edit.modal = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .filter_target_charts {
    .label_warp {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 0 10px;

      .tips {
        line-height: 32px;
        font-size: 14px;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }

    .checkbox_group {
      max-height: calc(100vh - 500px);
      overflow: hidden;
      overflow-y: auto;
    }

    .selected {
      color: #2d8cf0;
    }

    .item {
      display: flex;
      justify-content: start;
      // line-height: 35px;
      border-bottom: 1px solid #ccc;
      padding: 10px;

      ::v-deep .ivu-checkbox {
        margin-top: 2px;
      }

      .checkbox_lable {
        margin-left: 10px;
      }

      .tag {
        border-radius: 3px;
        padding: 1px 8px;
        font-size: 12px;
        line-height: 18px;
        margin-right: 5px;
      }

      .blue {
        background-color: rgba(25, 109, 255, 0.1);
        color: #196dff;
      }

      .green {
        background-color: rgba(38, 192, 204, 0.1);
        color: #26c0cc;
      }

      .yeloow {
        background-color: rgba(253, 110, 25, 0.1);
        color: #fd6e19;
      }
    }
  }
</style>
